﻿@page "/docs/components/numeric-edit"

<Seo Canonical="/docs/components/numeric-edit" Title="Blazorise NumericEdit component" Description="Learn to use and work with the Blazorise NumericEdit component, a native input element for any kind if numeric values." />

<DocsPageTitle Path="Components/Numeric Edit">
    Blazorise NumericEdit component
</DocsPageTitle>

<DocsPageLead>
    A native numeric <Code Tag>input</Code> component built around the <Code Tag>input type="number"</Code>.
</DocsPageLead>

<DocsPageParagraph>
    Use <Code Tag>NumericEdit</Code> to have a field for any kind of numeric values. All basic types are supported, including nullable types (<Code>int</Code>, <Code>long</Code>, <Code>float</Code>, <Code>double</Code>, <Code>decimal</Code>, etc.).
</DocsPageParagraph>

<DocsPageParagraph>
    Being built around native <Code>type="number"</Code> input element, the <Code>NumericEdit</Code> component in Blazorise has certain inherent limitations due to its reliance on native browser functionalities for numeric inputs. One such limitation is the handling of decimal values; for instance, inputting <Code>"0.0"</Code> may result in the component rounding the value to <Code>"0"</Code>. This occurs because the browser considers <Code>"0.0"</Code> as a complete value, which triggers an onchange event. Internally, the component, not knowing the exact number of decimals intended, rounds the value and subsequently triggers a <Code>ValueChanged</Code> event. This, in turn, prompts a refresh, causing Blazor to redraw the NumericEdit component, which updates the value and the caret position.
</DocsPageParagraph>

<DocsPageParagraph>
    Additionally, due to the component using the native <Code>type="number"</Code> partial values cannot be retrieved mid-entry. This means that constraints on the <Code>Value</Code> are only checked upon the blur event, allowing for the detection and handling of invalid values without interrupting the user's input process. To mitigate these issues, users could consider setting <Code>Immediate="false"</Code> to ensure the value is only submitted once focus is lost, or alternatively, use the <Anchor To="docs/components/numeric-picker" Title="Link to NumericPicker component">NumericPicker component</Anchor> as a substitute.
</DocsPageParagraph>

<DocsPageSubtitle>
    Examples
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Basic">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <BasicNumericEditExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="BasicNumericEditExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Generic type">
        Since <Code>NumericEdit</Code> is a generic component you will have to specify the exact data type for the value.
        Most of the time it will be recognized automatically when you set the <Code>Value</Code> attribute, but if
        not you will just use the <Code>TValue</Code> attribute and define the type manually eg.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <NumericEditGenericExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="NumericEditGenericExample" />
</DocsPageSection>

<ComponentApiDocs ComponentTypes="[typeof(NumericEdit<>)]" />